<template>
  <view class="container">
    <!-- 头像 -->
    <view class="avatar" @click="chooseavatar">
      <image src="../../static/img/mybgc.png" mode="aspectFill" style="width: 110rpx; height: 110rpx; border-radius: 100rpx"></image>
    </view>
    <!-- 个人信息 -->
    <view class="infobox">
      <view class="infoitem">
        <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666">姓名</view>
        <input type="text" v-model="name" style="text-align: right" />
      </view>
      <view class="infoitem" @click="gochangephone">
        <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666">手机号</view>
        <view>
          123***1234
          <uni-icons type="right" size="15"></uni-icons>
        </view>
      </view>
      <view class="infoitem">
        <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666">微信昵称</view>
        <view>小青</view>
      </view>
      <view class="infoitem" @click="$refs.gender.open()">
        <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666">性别</view>
        <view>
          女
          <uni-icons type="right" size="15"></uni-icons>
        </view>
      </view>
      <view class="infoitem">
        <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666">出生日期</view>
        <view style="display: flex">
          <!-- 出生日期选择 -->
          <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
            <view class="uni-input">{{ date }}</view>
          </picker>
          <uni-icons type="right" size="15"></uni-icons>
        </view>
      </view>
      <view class="infoitem" @click="$refs.career.open()">
        <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666">身份选择</view>
        <view>
          专职老师
          <uni-icons type="right" size="15"></uni-icons>
        </view>
      </view>
      <view class="infoitem" @click="gochooseschool">
        <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666">在读/毕业学校</view>
        <view>
          <text style="font-family: PingFang SC, PingFang SC; font-weight: 500; color: #999999">选择学校</text>
          <uni-icons type="right" size="15"></uni-icons>
        </view>
      </view>
    </view>
    <!-- 性别选择 -->
    <uni-popup ref="gender" type="bottom">
      <view class="genderbox">
        <view class="boxheader">
          <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; color: #030303" @click="$refs.gender.close()">取消</view>
          <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; color: #3553e8">完成</view>
        </view>
        <picker-view indicator-style="height: 50px;" style="height: 400rpx" :value="value" @change="bindChange">
          <picker-view-column>
            <view v-for="(item, index) in genderlist" :key="index" style="text-align: center; line-height: 100rpx">
              {{ item }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
    <!-- 身份选择 -->
    <uni-popup ref="career" type="bottom">
      <view class="genderbox">
        <view class="boxheader">
          <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; color: #030303" @click="$refs.career.close()">取消</view>
          <view style="font-family: PingFang SC, PingFang SC; font-weight: bold; color: #3553e8">完成</view>
        </view>
        <picker-view indicator-style="height: 50px;" style="height: 400rpx" :value="value" @change="sfChange">
          <picker-view-column>
            <view v-for="(item, index) in careerlist" :key="index" style="text-align: center; line-height: 100rpx">
              {{ item }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    const currentDate = this.getDate({
      format: true
    });
    return {
      name: '小青',
      value: [0],
      genderlist: ['', '女', '男'],
      date: currentDate,
      careerlist: ['', '专职老师', '大学生']
    };
  },
  computed: {
    startDate() {
      return this.getDate('start');
    },
    endDate() {
      return this.getDate('end');
    }
  },
  methods: {
    // 头像上传
    chooseavatar() {
      uni.chooseMedia({
        count: 1,
        mediaType: ['image'],
        sourceType: ['album'],
        sizeType: ['original', 'compressed'],
        success: (e) => {
          console.log('返回选择的头像', e);
        }
      });
    },
    // 选择性别
    bindChange(e) {
      console.log(e);
    },
    // 身份选择
    sfChange(e) {
      console.log(e);
    },
    // 跳转到变更手机号
    gochangephone() {
      uni.navigateTo({
        url: '/sub_user/changephone/changephone'
      });
    },
    // 跳转到选择学校
    gochooseschool() {
      uni.navigateTo({
        url: '/sub_user/school/school'
      });
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    }
  }
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f9f9f9 !important;
}
.container {
  box-sizing: border-box;
  .avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 60rpx 0rpx;
  }
  .infobox {
    box-sizing: border-box;
    padding: 30rpx;
    width: 750rpx;
    background: #fff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    .infoitem {
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      border-bottom: 2rpx solid #f1f1f1;
      padding: 40rpx 0;
      font-size: 28rpx;
    }
  }
  .genderbox {
    box-sizing: border-box;
    width: 750rpx;
    height: 560rpx;
    padding: 40rpx;
    font-size: 28rpx;
    background: #fff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    .boxheader {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
